<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"  isELIgnored="true"%>
<%@taglib uri="/WEB-INF/c.tld" prefix="c"%>
<%@ include file="/skin.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:form="form">
<head>
<!--框架必需start-->
<script type="text/javascript" src="<c:out value='${sessionScope.libs}'/>/js/jquery.js"></script>
<script type="text/javascript" src="<c:out value='${sessionScope.libs}'/>/js/language/cn.js"></script>
<script type="text/javascript" src="<c:out value='${sessionScope.libs}'/>/js/framework.js"></script>
<link href="<c:out value='${sessionScope.libs}'/>/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="<c:out value='${sessionScope.contextPath}'/>/"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->
<!--E-R展现图必需start-->
<script type="text/javascript" src="<c:out value='${sessionScope.libs}'/>/js/diagram/go.js"></script>
<script type="text/javascript" src="<c:out value='${sessionScope.libs}'/>/js/diagram/er.js"></script> 
<!--E-R图展现必需end-->
<script type="text/javascript">
 $(function () {
	// 在此处创建 E-R 展现图的数据模型
        var nodeDataArray = [
        { key: "Products",
          items: [ { name: "ProductID", iskey: true, figure: "Decision", color: "yellow" },
                   { name: "ProductName", iskey: false, figure: "Cube1", color: "blue" },
                   { name: "SupplierID", iskey: false, figure: "Decision", color: "purple" },
                   { name: "CategoryID", iskey: false, figure: "Decision", color: "purple" } ] },
        { key: "Suppliers",
          items: [ { name: "SupplierID", iskey: true, figure: "Decision", color: "yellow" },
                   { name: "CompanyName", iskey: false, figure: "Cube1", color: "blue" },
                   { name: "ContactName", iskey: false, figure: "Cube1", color: "blue" },
                   { name: "Address", iskey: false, figure: "Cube1", color: "blue" } ] },
        { key: "Categories",
          items: [ { name: "CategoryID", iskey: true, figure: "Decision", color: "yellow" },
                   { name: "CategoryName", iskey: false, figure: "Cube1", color: "blue" },
                   { name: "Description", iskey: false, figure: "Cube1", color: "blue" },
                   { name: "Picture", iskey: false, figure: "TriangleUp", color: "red" } ] },
        { key: "Order Details",
          items: [ { name: "OrderID", iskey: true, figure: "Decision", color: "yellow" },
                   { name: "ProductID", iskey: true, figure: "Decision", color: "yellow" },
                   { name: "UnitPrice", iskey: false, figure: "MagneticData", color: "green" },
                   { name: "Quantity", iskey: false, figure: "MagneticData", color: "green" },
                   { name: "Discount", iskey: false, figure: "MagneticData", color: "green" } ] },
      ];
	var linkDataArray = [
	  { from: "Products", to: "Suppliers", text: "0..N", toText: "1" },
	  { from: "Products", to: "Categories", text: "0..N", toText: "1" },
	  { from: "Order Details", to: "Products", text: "0..N", toText: "1" }
	];
    /**
    * 调用ER图初始化函数
    * diagram为 E-R图所在div的id
    * nodeDataArray、linkDataArray若为JSON对象，需用JSON.stringify()将JSON对象转为JSON格式的字符串
    **/
    initERConfig("diagram",JSON.stringify(nodeDataArray),JSON.stringify(linkDataArray));
  }
 );
</script>
</head>

<body >
<div >
  <div id="diagram" style="background-color: white; width: 100%; height: 700px"></div>
</div>
</body>
</html>